/* 
    这里就是书写我们的打包规则的
*/

// 导入我们的gulp
let gulp = require('gulp')

// 导入css打包规则 gulp-cssmin
let cssmin = require('gulp-cssmin')

// 导入自动添加前缀的第三方 gulp-autoprefixer
let autoprefixer = require('gulp-autoprefixer')

// 打包sass
// 导入sass第三方 gulp-sass
let sass = require('gulp-sass')(require('sass'))

// 打包js
// 导入js打包的第三方 gulp-uglify
let uglify = require('gulp-uglify')
// 导入jsES6转ES5的第三方 gulp-babel
let babel = require('gulp-babel')

// 打包html
// 导入html打包的第三方 gulp-htmlmin
let htmlmin = require('gulp-htmlmin')
// 导入html组件的打包第三方 gulp-file-include
let fileInclude = require('gulp-file-include')

// 导入删除任务第三方 del
let del = require('del')

// 导入热更新任务的第三方 gulp-webserver
let webserver = require('gulp-webserver')

// 打包图片
// 导入图片的第三方 gulp-imagemin
// let imagemin = require('gulp-imagemin')




/* 
    
    打包css任务

        => 创建一个打包css的任务
        => 获取到要打包的文件
        => 进行打包的操作  ??????
        => 保存到指定的文件中
            -> 打开命令行工具 ,切换目录到项目的根目录
            -> 也就是gulpfile.js同级目录
            -> 输入指令: $ gulp 要执行的文件
        => 书写我们的打包规则
            -> 需要借助一个第三方 叫做: gulp-cssmin
            -> 下载第三方 因为只有在开发阶段使用
            -> 所有我们下载的时候直接以开发依赖的方式下载
            -> $ npm i -D gulp-cssmin
        => 下载完毕有导入到文件中
        => 得到的就是一个函数 直接调用即可

        => 自动添加前缀
        => 也是一个第三方  能帮助我们自动添加前缀
        => 这个叫做: gulp-autoprefixer 
        => 这个第三方就是给我们来制动添加前缀的
        => 导入进来就是一个函数
        => 但是这个需要传递参数来配置
        => autoprefixer({browsers:['last 2 versions']}) 
            -> last 2 versions 表示最新的谷歌浏览器

        Replace Autoprefixer browsers option to Browserslist config.
        Use browserslist key in package.json or .browserslistrc file.


*/

/* 
    打包sass的任务
        => 创建一个打包sass的任务
        => 也需要借助一个第三方 
            -> 这个第三方叫做 gulp-sass
            -> 注意: 这个的导入方式和其它的一点不一样
                + let sass = require('gulp-sass')(require('sass'))
            -> 注意: 这个sass需要两个第三方 一个叫gulp-sass 另一个叫 sass
        => 保存打包后的文件到指定的位置
*/

/* 
    打包js任务
        => 创建一个打包js的任务
        => 打包js也需要借助一个第三方
        => 这个第三方叫做: gulp-uglify
        => 把打包后的文件保存到指定的位置
        => ES6语法转化成ES5语法
        => 也需借助一个第三方
        => 这个第三方叫做: gulp-babel
        => 注意: 其实我们需要的是三个第三方
            -> gulp-babel
            -> @babel/core
            -> @babel/preset-env
        => 注意: 但是我们主需要引入一个就可以了 gulp-babel
        => 注意: 使用的时候需要传递一个参数
            -> babel({presets:['@babel/preset-env']})
*/


/* 
    打包html任务
        => 创建html打包任务
        => html的打包页需要借助一个第三方
        => 这个第三方叫做 gulp-htmlmin
        => 导入进来就是一个函数 我们直接调用即可
        => 注意: html的打包需要传递不同的参数 放到一个对象中
        => 把打包完成的文件保存到指定的位置

        => 组件
        => 需要借助一个第三方
        => 叫做 gulp-file-include
        => 我们需要下载和导入
        => 使用的时候需要传递参数
            -> basepath  这个表示组件保存的位置
            -> prefix  这个表示的是自己定义的一个特殊标识符
*/

/* 
    打包 image(图片) 任务
        => 创建打包任务
        => 图片的打包也需要借助一个第三方
        => 这个第三方叫做 : gulp-imagemin
        => 下载 导入
        => 导入进来就是一个函数 直接调用即可
        => 注意: 就是这个第三方很难下载成功
        => 打包后的文件保存到一个指定的位置

*/




// 1. 打包css 任务
function cssHandler() {
    return gulp
        .src('./src/css/*.css')
        // 书写自动添加前缀的要求
        .pipe(autoprefixer())
        // 这里是打包的过程
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css/'))
}

// 2. 创建打包sass的任务
function sassHandler() {
    // 这里书写打包流程
    return gulp
        .src('./src/sass/*.scss')
        // 直接调用我们导入进来的第三方  就是一个函数
        .pipe(sass())
        .pipe(autoprefixer())
        // 这里是打包的过程
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/sass/'))
}

// 3. 创建打包js的任务
function jsHandler() {
    // 这里面就是打包js的流程
    return gulp
        .src('./src/js/*.js')
        .pipe(babel({ presets: ['@babel/preset-env'] }))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js/'))

}

// 4. 创建html打包任务
function htmlHandler() {
    // 这里书写html的打包流程
    return gulp
        .src('./src/views/*.html')
        // 这里是使用组件
        .pipe(fileInclude({
            prefix: '@_@',
            basepath: './src/components/'
        }))
        // 这里是打包的具体流程
        .pipe(htmlmin({
            removeComments: true,
            removeEmptyAttributes: true,
            removeAttributeQuotes: true,
            collapseWhitespace: true,
            collapseBooleanAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            minifyCSS: true,
            minifyJS: true
        }))
        .pipe(gulp.dest('./dist/views/'))
}

// 5. 创建打包图片的任务
function imageHandler() {
    // 这里书写打包的流程
    return gulp
        .src('./src/images/**.*')
        // .pipe(imagemin())
        .pipe(gulp.dest('./dist/images/'))
}

//  6. 下面的就是一些不用打包的直接移到dist文件夹中就好
// 创建一个打包audio的打包任务
function audioHandler() {
    // 这里只需要把文件转移到dist文件中就好
    return gulp
        .src('./src/audio/**.*')
        .pipe(gulp.dest('./dist/audio'))
}
// 创建一个打包video的打包任务
function videoHandler() {
    // 这里只需要把文件转移到dist文件中就好
    return gulp
        .src('./src/video/**.*')
        .pipe(gulp.dest('./dist/video'))
}
// 创建一个打包data的打包任务
function dataHandler() {
    // 这里只需要把文件转移到dist文件中就好
    return gulp
        .src('./src/data/**.*')
        .pipe(gulp.dest('./dist/data'))
}
// 创建一个打包fonts的打包任务
function fontsHandler() {
    // 这里只需要把文件转移到dist文件中就好
    return gulp
        .src('./src/font/**.*')
        .pipe(gulp.dest('./dist/font'))
}
// 创建一个打包lib的打包任务
function libHandler() {
    // 这里只需要把文件转移到dist文件中就好
    return gulp
        .src('./src/lib/**.*')
        .pipe(gulp.dest('./dist/lib'))
}

/* 
    8. 创建一个删除任务
        => 因为在我们开发的过程中 有时候需要修改一些文件
        => 但是修改完了以后会出现多个文件 而不是保留最后的那个文件
        => 所以需要把之前保留的删除掉
        => 需要借助一个第三方
        => 叫做 del
        => 使用的时候不需要借助gulp
        => 导入进来就是一个函数
*/
// 创建一个删除的任务
function delHandler() {
    return del('./dist/')

}


/* 
    9. 开启一个热更新服务
        => 也需要借助一个第三方
        => 这个第三方叫做 gulp-webserver
        => 下载导入
        => 导入进来以后就是一个函数
        => 使用的时候直接调用即可
        => 注意:需要传递参数
            -> host     这个表示域名
            -> port     这个表示端口号
            -> open     这个表示你要打开的文件
            -> livereload   这个表示是否自动刷新页面
*/
//创建一个热更行的任务
function webServer() {
    // 这里书写的就是我们的热更新的配置
    return gulp
        .src('./dist/')
        .pipe(webserver({
            host: 'localhost',
            port: 8080,
            open: 'views/home.html',
            livereload: true
        }))

}

/* 
    10. 需要一个监听的任务

*/
function watchHandler() {
    gulp.watch('./src/views/*.html', htmlHandler)
    gulp.watch('./src/css/*.css', cssHandler)
    gulp.watch('./src/js/*.js', jsHandler)
}



/* 
    7. 创建一个综合任务
        => 就是把我们要执行的任务 一次性的执行完毕
        => 做好我们导出的时候起的名字叫做 default
        => 因为 如果你导出的名字叫做default 可以不用写这个名字
        => 直接书写gulp执行就可以
*/
// let _default = gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, audioHandler, videoHandler, dataHandler, fontsHandler, libHandler)

// 因为我们如果有了删除的任务 就要先执行删除在执行后面的打包操作
let _default = gulp.series(
    delHandler,
    gulp.parallel(cssHandler, sassHandler, jsHandler, htmlHandler, imageHandler, audioHandler, videoHandler, dataHandler, fontsHandler, libHandler),
    webServer,
    watchHandler
)







// 必须导出你要执行的任务
module.exports = {
    cssHandler,
    sassHandler,
    jsHandler,
    htmlHandler,
    imageHandler,
    audioHandler,
    videoHandler,
    dataHandler,
    fontsHandler,
    libHandler,
    delHandler,
    webServer,
    default: _default

}